TypeScript 입문서(Intro -> Kinda Advanced)

왜 TypeScript인가? 내 말은 지난 10년 동안 전체 대화가 더 간결해지는 것에 관한 것인데 우리가 정말로 더 많은 코드를 작성하고 싶은가를 의미합니다.
예!
예, 조금 더 미리 작성하면 아무도 감당할 수 없는 모든 프로덕션 버그를 방지하는 데 도움이 되기 때문입니다. 이렇게 하면 귀하 또는 다른 사람이 브라우저 개발 도구에서 호출 스택을 드릴다운하는 것을 방지할 수 있습니다.

또 다른, 아마도 가장 좋은 이유는 통합된 문서와 IntelliSense가 개발자로서의 삶을 훌륭하게 만들어 줄 것입니다. 고무 오리가 항상 어깨 너머로 당신이 할 수 있는 것과 할 수 없는 것을 귀에 대고 소리지르는 것처럼 느껴지기 때문입니다.



TypeScript는 어떻게 작동합니까?
TypeScript는 .ts 확장자 파일로 작성됩니다. 이를 통해 사용자가 설치하는 TypeScript 컴파일러가 이러한 파일을 보고 바닐라 JS 파일로 컴파일할 수 있습니다.

TypeScript 기초

Type Inference(Implicit)- Typescript는 우리를 위해 유형을 추측합니다.

let firstTS = 36
// This will show as: let firstTS: number

유형 주석(명시적) - 우리(개발자)는 TypeScript에 유형을 알려줍니다.

let firstTSAgain: number = 36
// This will show as: let firstTS: number

보시다시피 TypeScript는 변수가 숫자 값으로 선언될 때 유형 번호를 적용하므로 둘 다 동일한 결과를 가집니다. 이 경우 지정하거나 중복할 필요가 없습니다. 그러나 값 없이 변수를 선언하는 경우 이것이 필요합니다.

let missingVal: number

// You can also extend to have multiple types such as:
let moreOptions: (number | string)

유형 및 인터페이스

TypeScript의 가장 좋은 부분 중 하나는 코드 구조를 정확한 수준으로 제어할 수 있는 고유한 유형을 만드는 것입니다. 이 예제에서 우리는 우리가 지정한 문자열 집합에서 특정 문자열만 될 수 있는 유형을 만들고 있습니다.

type FavBand = "Weezer" | "Tool" | "GreenDay" | "Dropkick Murphys"

let coolBand: FavBand = "Tool"

인터페이스는 유형과 매우 유사하지만 여기에서 볼 수 있는 객체와 같은 데이터 셰이프에 더 구체적입니다. drinkCoffee에 대한 재산의 통지는 ?. 이는 이 속성을 필수가 아닌 선택으로 설정하기 위한 것입니다.

interface PathToSenJSDev {
    language: string,
    drinksCoffee?: boolean
}

let dev: PathToSenJSDev = { 
    language: 'JS',   
    drinksCoffee: true   
}

기능

매개 변수가 유형으로 설정되고 괄호 뒤에 함수의 반환 값도 지정되는 함수의 기본 버전이 여기에 표시됩니다. 함수 호출에 문자열이 전달되면 TypeScript는 그 자리에서 오류를 표시합니다.

function doubleMe(num: number): number {
    return num * 2
}

doubleMe(2)

매핑된 유형

지금까지 TypeScript에서 제가 가장 좋아하는 부분입니다. 매핑된 유형을 다른 유형에 특정 기능을 적용할 수 있다고 생각하십시오.

이 예제에서는 레시피 인터페이스를 설정한 다음 인터페이스를 매핑하고 속성을 읽기 전용 및 선택 사항으로 만드는 방법을 학습하여 매핑된 유형에 대해 배우기 위해 음식을 사용할 것입니다.

type range = 1|2|3|4|5|6|7|8|9|10

// Main Interface
 interface Recipe {
     numIngred: number;
     cookMethod: string;
     score: range
 }

 let BeefBourguignon: Recipe = {
    numIngred: 8,
    cookMethod: "Simmer",
    score: 9
 }

// Here we can modify 
 BeefBourguignon.numIngred = 2;


// Create a readonly version that can map over a type 
// Syntax [P in keyof T] is depicting "Property in keyof Type"

 type ReadOnlyRecipe<T> = {
     readonly [P in keyof T]: T[P]
 }

 let readOnlyBeefBourguignon: ReadOnlyRecipe<Recipe> = {
    numIngred: 8,
    cookMethod: "Simmer",
    score: 9
 }
// Will not allow since this is now readonly
//  readOnlyBeefBourguignon.numIngred = 4


//Different version for adding optional to each property
 type OptionalProps<T> = {
     [P in keyof T]? : T[P]
 }

마무리

이것은 TypeScript에 대한 작은 기능 집합을 포함하는 입문서일 뿐이지만 사용을 시작하는 것이 얼마나 간단하고 확장 가능성이 있는지 쉽게 확인할 수 있는 몇 가지 좋은 사용 사례를 선택했으면 합니다. 코드베이스. 적어도 향후 몇 년 동안 JavaScript 개발자가 될 계획이라면 도구 세트에 이것을 포함해야 한다고 말하는 것이 안전하다고 생각합니다.

-- 브래드