TypeScript란?

thumb

타입스크립트란?

자바 스크립트 그 이상

TypeScript는 편집기와의 긴밀한 통합을 지원하기 위해 JavaScript에 추가 구문을 추가합니다. 편집기 초기에 오류를 포착합니다.

신뢰할 수 있는 결과

TypeScript 코드는 JavaScript로 변환되어 JavaScript가 실행되는 모든 곳에서 실행됩니다 : 브라우저, Node.js 또는 Deno 및 앱에서.

대규모에성의 안전

TypeScript는 JavaScript를 이해하고 유형 추론을 사용하여 추가 코드 없이 훌륭한 도구를 제공합니다.

 

 

자바 스크립트 프로그래머를위한 유형 스크립트

TypeScript는 JavaScript와 특이한 관계에 있습니다. TypeScript는 JavaScript의 모든 기능과 TypeScript의 유형 시스템 위에 추가 레이어를 제공합니다.

예를 들어 JavaScript는 문자열 및 숫자와 같은 언어 기본 형식을 제공하지만 이러한 기본 형식을 일관되게 할당했는지 확인하지 않습니다. 타입스크립트가 그렇습니다.

즉, 기존 작업 자바 스크립트 코드도 TypeScript 코드입니다. TypeScript의 주요 이점은 코드에서 예기치 않은 동작을 강조 표시하여 버그 가능성을 낮출 수 있다는 것입니다.

Types by Inference

TypeScript는 자바 스크립트 언어를 알고 있으며 많은 경우에 유형을 생성합니다. 예를 들어 변수를 만들고 특정 값에 할당할 때 TypeScript는 값을 유형으로 사용합니다.

 

let helloWorld = "Hello World";
//  ^?

https://www.typescriptlang.org/play/#code/DYUwLgBAFizA9gdXgJ2AEwgXggIgBKwITJrq4DcAUAPQ0QQB6A-EA

TS Playground - An online editor for exploring TypeScript and JavaScript

자바 스크립트의 작동 방식을 이해함으로써 TypeScript는 자바 스크립트 코드를 허용하지만 유형이있는 유형 시스템을 구축 할 수 있습니다. 이렇게 하면 코드에서 형식을 명시적으로 만들기 위해 문자를 추가할 필요 없이 형식 시스템을 제공합니다. 이것이 TypeScript가 helloWorld가 위의 예에서 문자열이라는 것을 아는 방법입니다.

Visual Studio Code에서 JavaScript를 작성하고 편집기 자동 완성 기능이 있을 수 있습니다. Visual Studio Code는 내부적으로 TypeScript를 사용하여 JavaScript로 더 쉽게 작업할 수 있도록 합니다.

Defining Types

자바스크립트에서 다양한 디자인 패턴을 사용할 수 있습니다. 그러나 일부 디자인 패턴에서는 동적 프로그래밍을 사용하는 패턴과 같이 형식을 자동으로 유추하기 어렵습니다. 이러한 경우를 다루기 위해 TypeScript는 TypeScript에 유형이 무엇인지 알려줄 수 있는 위치를 제공하는 JavaScript 언어의 확장을 지원합니다.

예를 들어, name: string 및 id: number를 포함하는 유추된 유형의 객체를 만들려면 다음과 같이 작성할 수 있습니다.

 

const user = {
  name: "Hayes",
  id: 0,
};

https://www.typescriptlang.org/play/#code/MYewdgzgLgBArhApgJxgXhgbwFAxmAQwFtEAuGAIgAkCBPRCCgGlxgEsATcgBhYF8A3EA

TS Playground - An online editor for exploring TypeScript and JavaScript

 

인터페이스 선언을 사용하여 이 개체의 모양을 명시적으로 설명할 수 있습니다.

interface User {
  name: string;
  id: number;
}

https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgKoGdrIN4ChnIhwC2EAXMumFKAOYDc+ywAJhSAK7EBG0jAvkA 

TS Playground - An online editor for exploring TypeScript and JavaScript

 

그런 다음 변수 선언 뒤에 다음과 같은 구문을 사용하여 JavaScript 객체가 새 인터페이스의 모양을 따르도록 선언할 수 있습니다.

const user: User = {
  name: "Hayes",
  id: 0,
};

https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgKoGdrIN4ChnIhwC2EAXMumFKAOYDc+ywAJhSAK7EBG0jAvrgD0Q5AFoJCDmAljcCAPYgqyDpigUMWALw4mRUhQBEACTgBPCOiMAaJqwoAGO-3pA 

TS Playground - An online editor for exploring TypeScript and JavaScript

제공한 인터페이스와 일치하지 않는 개체를 제공하면 TypeScript에서 다음과 같이 경고합니다.

interface User {
  name: string;
  id: number;
}

const user: User = {
  username: "Hayes",
  id: 0,
};

https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGY1oFAEsA7AFxgDMBDAY0lAFVEZQBvHUUA8gW0lUSOkIBzANytQeACaoCAV04AjGKIC+OHJTgE+oGQ2ip6jALzMxumB26oARAAlyAT0iJrAGjGTUABnfLhQA 

TS Playground - An online editor for exploring TypeScript and JavaScript

 

JavaScript는 클래스와 객체 지향 프로그래밍을 지원하기 때문에 TypeScript도 지원합니다. 클래스와 함께 인터페이스 선언을 사용할 수 있습니다.

interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);

https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgKoGdrIN4ChnIhwC2EAXMumFKAOYDc+ywAJhSAK7EBG0jAvrlwIANnHTo0mKAEEECAPYdwOJkVIUqNEAyat2XXlEZNFILRwRgFUABTrylanQA0zNoUPQAlKoIEwAAtgdAA6B2QAXkISCEZ-ZCCQ0NYo93jkQUFhBXMwZA5pCgwsaJAIAHcpaDlFZTBbACIAWQ4oAAdAgE9GtwBGb3ogA 

TS Playground - An online editor for exploring TypeScript and JavaScript

인터페이스를 사용하여 매개 변수에 주석을 달고 함수에 값을 반환할 수 있습니다.

function getAdminUser(): User {
  //...
}
 
function deleteUser(user: User) {
  // ...
}

https://www.typescriptlang.org/play/#code/PTAEAEDsHsFECd7XgZwFAEtIBcCm8AzAQwGNdQBVFfUAbzVFEiIFtcAuUFbeLAcwDcDUBgAmnSAFcWAI3xCAvmhCgAtOpKTs61WgKTIJbBmiRQfXNgCCollir4AFAEpOD+HWEgAdL7RK9AyMTM1FcABtLXHdHSWp4N3jnT0YVX29-IA 

TS Playground - An online editor for exploring TypeScript and JavaScript

JavaScript에는 이미 인터페이스에서 사용할 수있는 부울, bigint, null, 숫자, 문자열, 기호 및 정의되지 않은 작은 기본 유형 집합이 있습니다. TypeScript는 any(무엇이든 허용), 알 수 없음(이 유형을 사용하는 사람이 유형이 무엇인지 선언하도록 함), never (이 유형이 발생할 수 없음) 및 void(정의되지 않은 값을 반환하거나 반환 값이 없는 함수)와 같은 몇 가지 더 많은 것으로 이 목록을 확장합니다.

건물 형식에 대한 두 가지 구문이 있음을 알 수 있습니다: 인터페이스 및 형식. 인터페이스를 선호해야합니다. 특정 기능이 필요한 경우 type을 사용합니다.

 

Composing Types

TypeScript를 사용하면 간단한 유형을 결합하여 복합 유형을 만들 수 있습니다. 그렇게 하는 두 가지 인기 있는 방법이 있습니다: Unions 제네릭.

Unions

공용 구조체를 사용하면 형식이 여러 형식 중 하나가 될 수 있음을 선언할 수 있습니다. 예를 들어 부울 형식을 true 또는 false로 설명할 수 있습니다.

 

type MyBool = true | false;

https://www.typescriptlang.org/play/#code/C4TwDgpgBAsiBCB7RAbKBeKwBOBXaAPlAGYCGKAzhANxA

TS Playground - An online editor for exploring TypeScript and JavaScript

Note: 

위의 MyBool 위로 마우스를 가져가면 부울로 분류된 것을 볼 수 있습니다. 이것이 구조 유형 시스템의 속성입니다. 이에 대한 자세한 내용은 아래를 참조하십시오.

공용 구조체 형식의 일반적인 사용 사례는 값이 허용되는 문자열 또는 숫자 리터럴 집합을 설명하는 것입니다.

 

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

https://www.typescriptlang.org/play/#code/C4TwDgpgBA6glgOwCYHsDuBlYBDYEDOUAvFAEQqQKlQA+ZAxgDYr4RLV2kC2icPAXm1IBuAFChIUADIp6Aayy4CxMs3lDaZAK4I1coWInQACizjA4ANwgB5JEgByWrgCMIAJ3wBVZB4AqEAgqAIyaAMyaAKyaAOyaAJzCQA 

TS Playground - An online editor for exploring TypeScript and JavaScript

공용 구조체는 다양한 유형을 처리하는 방법도 제공합니다. 예를 들어, 배열이나 문자열을 사용하는 함수가있을 수 있습니다.

 

function getLength(obj: string | string[]) {
  return obj.length;
}

https://www.typescriptlang.org/play/#code/GYVwdgxgLglg9mABAcwKZQDKrMqALACjgCMArALkQGcoAnGHRAH2roeQG0BdASkQG8AUIkS10IWkhKkAdABtsuPAG5BAXyA

TS Playground - An online editor for exploring TypeScript and JavaScript

변수의 유형을 알아보려면 typeof를 사용하십시오.

 

string : typeof s === "string"
number :  typeof n === "number"
boolean :  typeof b === "boolean"
undefined :  typeof undefined === "undefined"
function :  typeof f === "function"
array :  Array.isArray(a)

 

예를 들어, 함수가 문자열 또는 배열로 전달되는지 여부에 따라 다른 값을 반환하도록 할 수 있습니다.

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
            
(parameter) obj: string
  }
  return obj;
}

https://www.typescriptlang.org/play/#code/GYVwdgxgLglg9mABAdwE4EMAOBJMBBVDATwAo4AjAKwC5EBnKVGMAc0QB97HmWBtAXQCUiAN4AoRIhjBEJKEUwBTODIqVEAXi2IARAyasdw8ZMmpFUEKiS81-ANxiA9E9NvTAPQD8ExAF9fc0trRDVHPyA

TS Playground - An online editor for exploring TypeScript and JavaScript

Generics

제네릭은 형식에 변수를 제공합니다. 일반적인 예는 배열입니다. 제네릭이 없는 배열은 무엇이든 포함할 수 있습니다. 제네릭이 있는 배열은 배열에 포함된 값을 설명할 수 있습니다.

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

제네릭을 사용하는 고유한 형식을 선언할 수 있습니다.

 

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

// This line is a shortcut to tell TypeScript there is a
// constant called `backpack`, and to not worry about where it came from.
declare const backpack: Backpack<string>;

// object is a string, because we declared it above as the variable part of Backpack.
const object = backpack.get();

// Since the backpack variable is a string, you can't pass a number to the add function.
backpack.add(23);

https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYAsBWAUAJYB2ALjAGYCGAxpKAEI0DWADswDwAqAni5AHygA3nlChKAEwmoAFHABGAK1Q8+ASlABeQQDc4BCQG5RoAOaQSsjdtCrIxgL548IWwAsCiUABtidT+KgiG4IJNQAriSgJHDRkN7etryQAMrU0AQsUSRuMP5elC5g1HBEiCSUpKDUlAmQEqAABvLMbNRMjQA04kQNMaBEcFEA7gjQ3OLycJGgw7nQ-lE1ALZ05PDLAHR4EpDU3pQL1aXloC3tbUyojBcc5RlEpvzGRaAKintRAZRBJA+m3Xke0o4UQdGGdF2+0O9VABCilCmOjolC8OToOkOBER3jobGgUTg5AYrWY2xKZUJSk+WjOpPam3MJBkaherhSxFo0VydNu7VAmIyOPygXuxABoG402qlQA5FE2IgCgNwssgdBorF0eIpKByOEiNQSARSttzqwyZIJDJMKygA 

TS Playground - An online editor for exploring TypeScript and JavaScript

Structural Type System

TypeScript의 핵심 원칙 중 하나는 유형 검사가 값의 모양에 초점을 맞추는 것입니다. 이것은 때때로 "오리 타이핑"또는 "구조적 타이핑"이라고합니다.

구조 유형 시스템에서 두 객체의 모양이 같으면 동일한 유형으로 간주됩니다.

 

interface Point {
  x: number;
  y: number;
}
 
function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
 
// logs "12, 26"
const point = { x: 12, y: 26 };
logPoint(point);

https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgAoHtRmQbwFDLIAeAXMiAK4C2ARtANwHICeZltDeAvnnjBSARhg6EMgA26AOYYsACgAOZWeACUuJglEBndOIgA6SVLkADACQ4FBolwA0yS9eZdTqxjzwB6LxOnbkACIARgAmB1CANkC8LRBtbAVMcGQAXlxiMjCHVmQo5C5GYxUwRWSwdyA

TS Playground - An online editor for exploring TypeScript and JavaScript

point 변수는 Point 형식으로 선언되지 않습니다. 그러나 TypeScript는 유형 검사에서 Point의 모양을 Point의 모양과 비교합니다. 모양이 같으므로 코드가 전달됩니다.

셰이프 일치에는 개체 필드의 하위 집합만 일치하면 됩니다.

 

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
// ---cut---
const point3 = { x: 12, y: 26, z: 89 };
logPoint(point3); // logs "12, 26"

const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect); // logs "33, 3"

const color = { hex: "#187ABF" };
logPoint(color);

https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYAsBWAUAJYB2ALjAGYCGAxpKAApzEmgDeeooAHqkQK4BbAEYwA3B1ABPXoJHRxAXzx5yfItRIE4RUABs4Ac0bMAFAAdUx0gEo2E6tsRxdkAHT6DJgAYASVmdcuBQAaUD8AyQUva0U8EFAAWiTqPhIkhLwHIkQWMyZSDFAAXjZuVABGNFDpdAA2UIAvVAAOAE5QBXEPKxJzfJIMGNB4j0RQACJK0LRa8eUsnNBoSA1i0p5QDAxq1G3QAHcCABMSAAtdgAZQ08gCA1OSFouOrsMek2WNIZHDMfGt0IYOaZRwsBz6aBrVigG4bcYAYnKzQA7ABBABCADFxi88N1+iZwQgYkA 

TS Playground - An online editor for exploring TypeScript and JavaScript

클래스와 객체가 따르는 방식에는 차이가 없습니다.

class VirtualPoint {
  x: number;
  y: number;
 
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
 
const newVPoint = new VirtualPoint(13, 56);
logPoint(newVPoint); // logs "13, 56"

https://www.typescriptlang.org/play/#code/PTAEAEFMCdoe2gZwFygEwGYAsBWAUAJYB2ALjAGYCGAxpKAApzEmgDeeooAHqkQK4BbAEYwA3B1ABPXoJHRxAXzx5yfItRIE4RUABs4Ac0bMAFAAdUx0gEo2E6tsRxdkAHT6DJgAYASVmdcuBQAaUD8AyQUva0U8EFAAWiTqPhIkhLxqXUpERFAANQJoEj5KXSsWdk4eUH5hMQlpWtkG+0cSaD4NBBMaurlQpv6YWyrOUBIACwJEQNAAXm5xcYnp2ckFqWXQJSVM9trIAHd8is2iY4KikrKKkwBGDFCcADYYvA87i5OKmNB4jx5ABEj2eLyBQA 

TS Playground - An online editor for exploring TypeScript and JavaScript