한 곳에서 TypeScript 기초

1. 소개

프로그래밍 언어는 두 가지 범주로 나뉩니다.

Statically typed

Dynamically typed

Statically-typed 언어(C, Java, C#, ... )에서 변수 유형은 컴파일 타임에 설정되며 나중에 변경할 수 없습니다.
Dynamically-typed 언어(PHP, JavaScript, Python, ... )에서 변수 유형은 런타임에 결정되며 나중에 변경할 수 있습니다.
TypeScript는 JavaScript(기본적으로 정적 타이핑 및 일부 추가 기능이 포함된 JavaScript) 위에 구축된 프로그래밍 언어이므로 시작하기 전에 javascript에서 이 개념에 대해 잘 알고 있는지 확인하십시오.

변수

어레이

물체

기능

화살표 함수

파괴

...

2. 내장형

우리가 알고 있듯이 JavaScript에는 다음과 같은 유형이 내장되어 있습니다.

번호

스트링

부울

어레이

오브젝트

정의되지 않은

널

따라서TypeScript 이 목록을 확장하고 다음과 같은 몇 가지 새로운 기본 제공 유형을 소개합니다.

임의의

알 수 없음

절대

열거형

튜플

1- The Any Type : 변수를 선언하고 초기화하지 않으면 TypeScript 컴파일러는 변수가 any 유형이라고 가정합니다. 즉, 모든 유형의 데이터를 변수에 할당할 수 있습니다. 예는 다음과 같습니다.

let anyType; // let anyType: any

anyType = 12;

console.log(typeof anyType); // output: number

anyType = "Random string";

console.log(typeof anyType); // output: string

Note : variables, functions를 선언하려면 다음 구문을 따르기만 하면 됩니다.

let numberType: number = 12;
let numberType: string = 12;

function taxe(income: number): number {
  return income * 0.2;
}

2- Arrays :

let numbers = [1, 2, 3]; // let numbers: number[] = [1, 2, 3]

let anyTypes = []; // let anyTypes: any[]

anyType[0] = 100;
anyType[0] = "r_string";

let names = ["ahmed", "zineddine"]; // let names: string[] = ["ahmed", "zineddine"]

3- Tuples : 튜플은 각 인덱스에 대해 미리 정의된 길이와 유형이 있는 유형 배열입니다.

let employee: [number, string] = [1, "Steve"];

4- Enums :

// const small = 1;
// const medium = 1;
// const large = 1;

const enum Size {
  Small = 1,
  medium,
  large,
}

let mySize: Size = Size.Small;

console.log(mySize); // output : 1

4- Objects :

/*
let employee: {
  id:number,
  name:string
} = {
  id:1,
  name:'zineddine'
}
*/

let employee = {
  id: 1,
  name: "zineddine",
};

let user: {
  readonly id: number;
  name: string;
  pseudo?: string;
  retire: (date: Date) => void; // function declaration
} = {
  id: 1,
  name: "zineddine",
  retire: (date: Date) => {
    console.log(date);
  },
};

user.id = 10; // Cannot assign to 'id' because it is a read-only property

5- Type Aliases :

type User = {
  readonly id: number;
  name: string;
  pseudo?: string;
  retire: (date: Date) => void; // function declaration
};

let user: User = {
  id: 1,
  name: "zineddine",
  retire: (date: Date) => {
    console.log(date);
  },
};

6- Union Types :

function kgToLbs(kg: number | string): number {
  // Narrowing
  if (typeof kg === "string") {
    return parseFloat(kg) * 2.2046;
  }

  return kg * 2.2046;
}

7- Intersection Types :

// make no sense right ?
let weight: number & string;

// let see a realistic example

type draggable = {
  drag: () => void;
};

type resizable = {
  resize: () => void;
};

let UIWidget: draggable & resizable;

UIWidget = {
  drag: () => {},
  resize: () => {},
};

8- Literal Types :

// let quantity: 5 | 100;

type Quantity = 50 | 100;
let quantity: Quantity;

quantity = 5; // Type '5' is not assignable to type 'Quantity'

type Metric = "m" | "cm" | "mm";

9- Nullable Types :

function greeting(name: string | null | undefined) {
  if (name) {
    return `Hello, ${name}`;
  }
  return "Hello, World";
}

greeting("John");
greeting(null);
greeting(undefined);

10- Optional Chaining :

type User = {
  id: number;
  birthday?: Date;
};

function getUser(id: number): User | null | undefined {
  if (id === 1) {
    return {
      id,
      birthday: new Date("2000-01-01"),
    };
  }

  return null;
}

getUser(0); // output null

getUser(1); // output { id: 1, birthday: Date }

// optional property access operator
getUser(1)?.birthday?.getFullYear(); // output 2000

// optional element access operator

let employees: string[] | null = null;
employees?.[0];

// optional function call operator

let log: any = null;

log?.("hello"); // return undefined

11- Nullish Coalescing Operator :

let speed: number | null = null;

let ride = {
  // Falsy values ( false, 0, '', null, undefined )
  // speed: speed || 30, if speed is falsy, set it to 30 , but 0 is falsy
  // speed: speed != null ? speed : 30,
  speed: speed ?? 30,
};

12- Type Assertions :

let phone = document.getElementById("phone");

phone.value; // Property 'value' does not exist on type 'HTMLElement'

// let email = <HTMLInputElement> document.getElementById('email');

let email = document.getElementById("email") as HTMLInputElement;

email.value;

13- The Unknown Type :

function render(document: any) {
  // no compile error , but runtime error
  document.whatEver();
}

function render(document: unknown) {
  /*
  compile error, now the compîler forces us to check the type of the argument before using it

  */

  document.whatEver();

  if (document instanceof String) {
    document.toLocaleLowerCase();
  }
}

13- The Never Type :

function reject(message: string): never {
  throw new Error(message);
}

function processEvent(): never {
  while (true) {
    // ...
  }
}

processEvent();

/*

 => this code will never be executed , but the compiler don't tell us , so we have to use the `never` type.

 => now the compiler will tell us that the function will never return : Unreachable code detected.

 */

console.log("Hello World!");

첫 번째 챕터는 여기까지입니다!

Github 링크 : TypeScript-Fundamentals-in-One-Place