03. Type Script

변수

변수 선언에는 var, let, const를 사용합니다. 변수명 뒤에 : 타입을 추가해 타입 애너테이션을 합니다.

var 변수: 타입 = 값
let 변수: 타입 = 값
const 변수: 타입 = 값
let employeeName = 'Kim'
// 또는
let employeeName: string = 'Kim' 

let을 사용해 변수를 선ㄴ언한 경우, var로 선언된 변수의 스코프가 해당 변수를 포함하는 함수에서까지 사용할 수 있는 반면, 블록 스코프로 선언된 변수는 해당 변수를 포함하는 블록 안에서만 사용할 수 있습니다.

function calc(isSum: boolean) {
    let a = 100
  if (isSum){
    // a 가 정의된 안쪽의 블록 스코프 안의 사용이므로 에러가 발생하지 않는다
    let b = a + 1
    return b
  }
  // error TS2304: Cannot find name 'b',
  // var로 정의한 경우는 에러가 발생하지 않지만, let으로 정의했을 때는 에러가 발생한다
    return b
}

const는 상수를 나타내는 이름 그대로, 값을 변경할 수 없는 상수를 선언합니다. 한번 값이 대입되면 다시 대입할 수 없습니다.

const 변수는 let 변수와 같은 스코프 규칙을 갖습니다.

const num: number = 123
//값을 재대입하면 컴파일러 에러가 된다
num = 213

현재의 웹 프론트엔드 개발에서는 주로 let, const를 사용합니다.

원시타입

자바스크립트에서 자주 사용되는 원시(primitive) 타입인 string(문자열), number(수치), (boolean)논릿값은 타입스크립트에 대응하는 타입이 있습니다. 이 타입들은 자바스크립트의 typeof연산자를 사용할 때 표시되는 이름과 같습니다.

let age: number = 25
let idDone: boolean = false
let color: string = '노랑'

다른 타입의 값을 대입하고자 할 때는 에러가 발생합니다. 위와 같이 타입을 붙여 대입한 변수는 이후 정적 타입의 대상이 됩니다.

let mynumber: string = '222'
mynumber = '이백' // string 타입이므로 문제가 없다.
mynumber = 200 // string 타입 변수에 number 타입을 대입하려 하면 컴파일 에러가 발생한다.

배열

배열에 타입을 지정할 때는 그 배열을 구성하는 타입과 [ ] 표기를 사용합니다. 예를 들어 number의 배열이라면 number[ ]라는 구문을 사용합니다.

const array: string[] = []
array.push('abc')
array.push('1')
array.push(1) // 배열 타입과 맞지 않으므로 에러가 된다.

['foo', 1] 과 같이 여러 타입이 있는 배열일 경우에는 Union타입 이나 튜플(tuple)을 사용해 다음과 같이 표기할 수 있습니다.

const mixedArray = ['foo', 1]
const mixedArrayU: (string|number)[] = ['foo', 1] // Union 타입
const mixedArrayT: [string, number] = ['foo', 1] // 튜플

객체 타입

객체(object)는 키(key)와 값(value)을 이용한 데이터 형식 인스턴스입니다. 타입스크립트는 다음과 같이 키 이름과 값의 쌍을 지정해 객체 타입을 정의할 수 있습니다.

{ 키이름_1: 값_1; 키이름_2: 값_2; ...}
let 변수: {키명_1: 타입_1; 키명_2: 타입_2; ...} = 객체
const 변수: {키명_1: 타입_1; 키명_2: 타입_2; ...} = 객체
var 변수: {키명_1: 타입_1; 키명_2: 타입_2; ...} = 객체

타음은 객체 타입 정의 예시입니다.

// string 타입의 name과 number 타입의 age를 가진 객체 타입을 정의한다
const user : { name: string; age: number } = {
    name: 'JinYoung',
    age: 25,
}
console.log(user.name)
console.log(user.age)

객체 타입은 일부 또는 모든 속성을 ? 를 사용해 옵셔널(optional, 선택가능) 속성으로 지정할 수 있습니다. 옵셔널 속성으로 타입을 정의하면 해당 속성이 존재하지 않아도 문제없이 작동합니다.

function printName(obj: { firstName: string; lastName?: string }) {
    // ...
}
// 다음 패턴은 모두 정상 작동한다
printName({ firstName: 'Kim' })
printName({ firstName: 'Kim', lastName: 'JinYoung' })

객체 타입은 코드가 길어지기 때문에 타입 앨리어스와 함께 사용하는 경우가 많다고 합니다.

any

타입스크립트에서는 any라 불리는 특별한 타입이 있습니다 이름 그대로 모든 타입을 허용하는 타입입니다. 특정한 값에 대해 타입 체크 구조를 저용하고 싶지 않을 때 사용합니다.

let user: any = {firstName: 'Kim'}
// 타음 행의 코드는 모두 컴파일러 에러가 발생하지 않는다.
user.hello()
user()
user.age = 25
user = 'Hello'
// 타른 타입으로 대입해도 에러가 발생하지 않는다.
const a: number = user

any를 사용하면 타입 체크 기능이 작동하지 않게 됩니다. 타입스크립트의 장점을 활용할 수 없는것과 같습니다.

함수

타입스크립트의 함수에서는 인수와 반환값의 타입르 지정할 수 있습니다.

다음 코드는 함수의 인수와 반환값에 string을 정의한 예시입니다.

function sayHello(name: string): string {
    return `Hello ${name}`
}
sayHello('JinYoung')

옵셔널 인수도 정의할 수 있습니다. 옵셔널 인수는 인수명 뒤에 ? 를 붙입니다.

function sayHello(name: string, greeting?: string): string {
    return `${greeting} ${name}`
}
// 다음은 모두 문제없이 작동한다.
sayHello('JinYoung') // JinYoung
sayHello('JinYoung', 'Hello') // JinYoung Hello

인수나 반환값의 타입에 다양한 타입을 지정할 수 있습니다. 다음은 함수를 인수로 받는 함수의 타입 지정 예시입니다.

function printName(firstName: string, formatter: (name: string) => string) {
    console.log(formatter(firstName))
}

// '씨'를 뒤에 붙이는 이름 포맷 함수를 정의한다
function formatName(name: string): string {
    return `${name} 씨`
}
printName('홍만채', formatName) // 홍만채 씨