overview of TypeScript

타입스크립트 코드 테스트

https://www.typescriptlang.org/play

타입스크립트 핸드북

https://typescript-kr.github.io/pages/basic-types.html

TypeScript

• TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다.

• TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다.

• TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다.

• 컴파일은 그저 작성한 타입스크립트 코드를 일반적인 자바스크립트로 바꿔주는 것이다.

How Typescript Works?

function divide(a, b){
  return a /b;
}

divide("hello");

Errors
Parameter 'a' implicitly has an 'any' type.
Parameter 'b' implicitly has an 'any' type.
Expected 2 arguments, but got 1.

const player = {
  age: 12
}
player.age = false

Error
Type 'boolean' is not assignable to type 'number'.

Implicit Types vs Explicit Types

• 타입스크립는 타입을 추론할 수 있다. (Implicit Types)
• 비추천

let a = "hello" // let a: string
a = "bye" // no error
a = 1; // error: Type 'number' is not assignable to type 'string'.

• 타입스크립는 타입을 명시 하는 것이다. (Explicit Types)

let b : boolean = "x"; 
// error: Type 'string' is not assignable to type 'boolean'.
let c : boolean = false // no error
let d : number[] = [] // number's array

Types of TS

변수 : basic types

let a : number = 1;
let b : string = "1";
let c : boolean = true;

Array
let a : number[] = [1, 2];
let b : string[] = ["1", "2"];
let c : boolean[] = [true];

optional types (선택적 변수)

const player :{
    name: string;
    age?: number; // number || undefined
} = {
    name: 'huisu'
}
if (player.age && player.age < 10 ){
    console.log("hi");
}

Alias (재사용이 가능)

type Player = {
    name: string;
    age?: number;
} // Alias

const nico : Player = {
    name: "nico"
}

const soo : Player = {
    name: 'huisu',
    age: 31
}

type Age = number;
type Name = string;
type Player = {
    name: string;
    age?: Age;
}

• 과한 사용은 좋지 않음.

function 사용법  

type Player = {
    name: string;
    age?: Age;
}
// argument : type 
function playerMaker(name:string) : Player {
    return {
        name
    }
}
arrow function
const playerMaker = (name: string) : Player => ({name})
const soo = playerMaker('huisu');
soo.age = 31;

readonly

• 객체가 처음 생성될 때만 수정 가능

type Player = {
    readonly name: string;
    age?: Age;
}
const playerMaker = (name: string) : Player => ({name})
const soo = playerMaker('huisu');
soo.name = 'janhun' // error 
// Cannot assign to 'name' because it is a read-only property.
const numbers: readonly number[] = [1, 2, 3]
numbers.push(4) // error 
//Property 'push' does not exist on type 'readonly number[]'.

• readonly vs const
  - 변수와 프로퍼티중 어디에 사용할지 생각
  • 변수는 const를 사용
  • 프로퍼티는 readonly를 사용

Tuple

• 요소의 타입과 개수가 고정된 배열을 표현
• 단, 요소들의 타입이 모두 같을 필요는 없다
• number, string 이 쌍으로 있는 값을 표현하고 싶을 때 사용

// 갯수, type의 순서 모두 일치 해야한다.
const player: [string, number, boolean] = ['soo', 31, true]
player[0] = 1; // error 
// 읽기 전용도 같이 사용 가능 
const player: readonly [string, number, boolean] = ['soo', 31, true]

undefined & null

• undefined 과 null 둘 다 각각 자신의 타입 이름으로 undefined , null로 사용한다
• void처럼 그 자체로 유용한 경우는 거의 없다.

let a: undefined = undefined;
let b: null = null;

any

• 비어있는 값들을 쓰면 기본값이 any가 된다.
• typescript로 부터 빠져나오고 싶을 때 쓰는 타입이다.
• 아무 타입이나 될 수 있다.

// 비어있는 값
let a = [] // let a: any[]

// 모든 타입이 가능하다.
const a : any[] = [1, 2, 3, 4]
const b : any = true

a + b  // 😱

unknown

• 아직 type이 정해지지 않았음.
• type을 지정해줘야지만 사용이 가능하다.

let a:unknown;

let b = a + 1 // error : Object is of type 'unknown'.

if(typeof a === "number") {
    let b = a + 1
}

if(typeof a === 'string') {
    let b = a.toUpperCase();
}

void

• 어떤 타입도 존재할 수 없음을 나타낸다.
• 아무것도 return 하지 않는 함수를 대상으로 사용
• 보통 void를 따로 지정해줄 필요는 없음

function hello() {
    console.log('x')
}

never

• 함수가 절대 return 하지 않을 때 발생

function hello():never {
    return 'X'  
  	// error: Type 'string' is not assignable to type 'never'.
}
function hello():never {
    throw new Error('xxx')
} // ok 

function hello(name:string|number){
  if(typeof name === 'string'){
    name // name : string
  } else if (typeof name === 'number'){
    name // name : number
  } else {
    name // name : never (값이 제대로 들어오면 실행될 일이 없음, 작동하지 않음)
  }
}