step 1

TypeScript에서 인터페이스를 선언하고 사용할 수 있다.

TypeScript 파일에서 인터페이스 선언 예제

interface Pesron1 {
  name: string;
  age: number;
}
// 일반적인 형식
function hello1(person: {name: string; age: number}): void{
  console.log(`안녕하세요! ${person.name} 입니다.`);
}

// 인터페이스를 이용하여 매개변수입력을 진행하도록 설정
function hello2(person: Pesron1): void{
  console.log(`안녕하세요! ${person.name} 입니다.`);
}

const p1: { name: string; age: number} = {
  name: 'Mark',
  age: 33,
};

// 변수에 대입되는 값을 인터페이스 타입으로 선언
const p2: Pesron1 = {
  name: 'Mark',
  age: 33,
};

hello1(p1);
hello2(p2);

JavaScript 파일에서 확인하면 인터페이스 선언 부분이 보이지 않는다.

"use strict";
function hello1(person) {
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + " \uC785\uB2C8\uB2E4.");
}
function hello2(person) {
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + " \uC785\uB2C8\uB2E4.");
}
var p1 = {
    name: 'Mark',
    age: 33,
};
var p2 = {
    name: 'Mark',
    age: 33,
};
hello1(p1);
hello2(p2);

콘솔창 확인

인터페이스 변수를 입력받지 않아도 되는 값 지정

TypeScript 파일

interface Pesron2 {
  name: string;
  // 입력받지 않아도 상관 없는 값이면 ?표를 붙여준다.
  age?: number;
}

function hello3(person: Pesron2){
  if(person.age === undefined){
    person.age = 0;
  }
  console.log(`안녕하세요! ${person.name} 입니다. 나이는 ${person.age} 입니다`);
}

hello3({name: "Mark", age: 30});
hello3({name: "Anna"});

JavaScript 파일

"use strict";
function hello3(person) {
    if (person.age === undefined) {
        person.age = 0;
    }
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + " \uC785\uB2C8\uB2E4. \uB098\uC774\uB294 " + person.age + " \uC785\uB2C8\uB2E4");
}
hello3({ name: "Mark", age: 30 });
hello3({ name: "Anna" });

콘솔창 확인

파라미터값을 사용자가 지정하는 방법(어떤값이던지 넣는 방법)

typescript

interface Person3 {
  name: string;
  age?: number;
  [index: string]: any;
}

function hello4(person: Person3): void{
  console.log(`안녕하세요! ${person.name}, ${person.age}, ${person.systers} ${person.father} ${person.mater} 입니다.`);
}

const p31: Person3 = {
  name: 'Mark',
  age: 22,
}

const p32: Person3 = {
  name: 'Anna',
  systers: ["Sung", "Chan"],
}

const p33: Person3 = {
  name: "Bokdaengi",
  father: p31,
  mater: p32,
};

hello4(p31);
hello4(p32);
hello4(p33);

javascript

"use strict";
function hello4(person) {
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + ", " + person.age + ", " + person.systers + " " + person.father + " " + person.mater + " \uC785\uB2C8\uB2E4.");
}
var p31 = {
    name: 'Mark',
    age: 22,
};
var p32 = {
    name: 'Anna',
    systers: ["Sung", "Chan"],
};
var p33 = {
    name: "Bokdaengi",
    father: p31,
    mater: p32,
};
hello4(p31);
hello4(p32);
hello4(p33);

콘솔

typescirpt 프로젝트를 시작할 폴더 생성

해당 폴더에 명령어: npm init -y 

이용해서 node.js 환경 설정

해당 폴더에 명령어: npm i typescript -D

이용해서 typescript 환경 설정

그 후 명령어:  npx tsc 를 이용해서 typsescript 파일을 javascript파일로 컴파일 가능하고

실행 명령어: node 컴파일된파일명.js 입력해서 확인

tsconfig.json 파일 내부에

outDir: 컴파일 된 js파일이 들어갈 폴더 지정

rootDir: ts파일이 들어갈 폴더 지정

./src 위치에 .ts파일을 넣고 컴파일 (npx tsc)을 실행 하면

./dist 위치에 .js파일이 생성 된다.

타입 시스템

• 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템
• 컴파일러에게 자동으로 타입을 추론하는 시스템

타입스크립트의 타입 시스템

• 타입을 명시적으로 지정할 수 있다.
• 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론

타입이란 해당 변수가 할 수 있는 일을 결정한다.

// JavaScript

// f1 이라는 함수의 body 에서는 a 를 사용할 것이다.
// a 가 할 수 있는 일은 a 의 타입이 결정한다.
function f1(a) {
	return a;
}

함수 사용법에 대한 오해를 야기하는 자바스크립트

// JavaScript

// (f2 실행의 결과가 NaN을 의도한 것이 아니라면)
// 이 함수의 작성자는 매개변수 a 가 number 타입이라는 가정으로 함수를 작성했다.
function f2 (a) {
	return a * 38;
}

// 사용자는 사용법을 숙지하지 않은 채, 문자열을 사용하여 함수를 실행했다.
console.log(f2(10)); // 380
console.log(f2('mark')); // NaN

타입스크립트의 추론에 의지하는 경우

// 타입스크립트 코드지만,
// a의 타입을 명시적으로 지정하지 않은 경우이기 때문에 a 는 any 로 추론된다.
// 함수의 리턴 타입은 number로 추론된다. (Nan도 Number 의 하나이다.)

function f3(a) {
	return a * 38;
}

// 사용자는 a가 any 이기 때문에, 사용법에 맞게 문자열을 사용하여 함수를 실행했다.
console.log(f3(10)); // 380
console.log(f3('Mark') + 5);  // NaN

noImplicitAny 옵션

타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 'any'라고 판단하게 되면, 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다.

noImplicitAny에 의한 방어

// error Ts7006: Parameter 'a' implicitly has an 'any' type.

function f3(a){
	return a * 38;
}

// 사용자의 코드를 실행할 수 없습니다. 컴파일이 정상적으로 마무리 될 수 있도록 수정해야 합니다.
console.log(f3(10));
console.log(f3('Mark') + 5);

number 타입으로 추론된 리턴 타입

// 매개변수의 타입은 명시적으로 지정했습니다.
// 명시적으로 지정하지 않은 함수의 리턴 타입은 number로 추론됩니다.

function f4(a: number) {
	if (a > 0) {
    	return a * 38;
    }
}

// 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했다.
// 해당 함수의 리턴 타입은 number 이기 때문에, 타입에 따르면 이어진 연산을 바로 할 수 있다.
// 하지만 실제 undefined + 5 가 실행되어 Nan 이 출력된다.

console.log(f4(5)); // 190
console.log(f4(-5) + 5) // NaN

strictNullChecks 옵션

모든 타입에 자동으로 포함되어 있는 'null' 과 'undefined' 를 제거해준다.

number | undefined 타입으로 추론된 리턴 타입

// 매개변수의 타입은 명시적으로 지정했다.
// 명시적으로 지정하지 않은 함수의 리턴 타입은 number | undefined로 추론된다.

function f4(a: number) {
	if (a > 0 ) {
    	return a * 38;
    }
}

// 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했습니다.
// 해당 함수의 리턴 타입은 number | undefined 이기 때문에,
// 타입에 따르면 이어진 연산을 바로 할 수 없다
// 컴파일 에러를 고쳐야하기 때문에 사용자와 작성자가 의논을 해야 한다.

console.log(f4(5));
console.log(f4(-5) + 5); // error TS2532: Object is possibly 'undefined'.

명시적으로 리턴 타입을 지정해주는 방법

// 매개변수의 타입과 함수의 리턴 타입을 명시적으로 지정했습니다.
// 실제 함수 구현부의 리턴 타입과 명시적으로 지정한 타입이 일치하지 않아 컴파일 에러가 발생

// error TS2366: Function lacks ending return statement and return type does not inc
function f5(a: number): number {
	if ( a > 0 ) {
    	return a * 38;
    }
}

noImplicitReturns 옵션

함수내에서 모든 코드가 값을 리턴하지 않으면, 컴파일 에러를 발생시킨다.

// 모든 코드에서 리턴을 직접해야한다.

// if가 아닌 경우 return을 직접 하지 않고 코드가 종료된다.

// error TS7030: Not all code paths return a value.
function f5(a: number) {
	if (a > 0) {
    	return a * 38; 
    }
}

매개변수에 object가 들어오는 경우

// JavaScript

function f6(a) {
	return `이름은 ${a.name} 이고, 연령대는 ${Math.floor(a.age / 10) * 10}대 입니다.`;
}

// 이름은 Mark 이고, 연령대는 30대 입니다.
console.log(f6({name: 'Mark', age: 38}));

// 이름은 undefined이고, 연령대는 NaN대 입니다.
console.log(f6('Mark'));

object literal type

function f7(a: {name: string; age: number }): string {
	return `이름은 ${a.name} 이고, 연령대는 ${Math.floor(a.age / 10) * 10} 대 입니다.`;
}

// 이름은 Mark 이고, 연령대는 30대 입니다.
console.log(f7({name: 'Mark', age: 38}));
console.log(f7('Mark'));
// error TS2345: Argument of type 'string' is not assignable to
parameter of type '{name: string; age: number;}'

나만의 타입을 만드는 방법

interface PersonInterface {
	name: string;
    age: number;
}

type PersonTypeAlias = {
	name: string;
    age: number;
};

function f8(a: PersonInterface): string {
	return `이름은 ${a.name} 이고, 연령대는 ${Math.floor(a.age / 10) * 10} 대 입니다.`;
}

// 이름은 Mark 이고, 연령대는 30대 입니다.
console.log(f8({name: 'Mark', age: 38}));
console.log(f8('Mark'));
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'PersonInterface'

어떤 타입도 가지지 않는 빈 상태를 의미

function returnVoid(message: string): void{
  console.log(message);
  return undefined;
}

// 에러발생 리턴이 없기 때문에
// const r: undefined = returnVoid('리턴이 없다.');

function returnVoid(message: string){
  console.log(message);
  
}

// 에러발생 리턴이 없기 때문에
// const r: undefined = returnVoid('리턴이 없다.');

주로 return에 사용된다.

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

}

function fail(){
  return error('failed');
}

// 무한 루프
function infiniteLoop(): never {
  while(true){

  }
}

never 타입은 모든 타입의 subtype 이며, 모든 타입에 할당 할 수 있습니다.

하지만, never에는 그 어떤 것도 할당할 수 없습니다.

any 조차도 never에게 할당 할 수 없습니다.

잘못된 타입을 넣는 실수를 막고자 할 때 사용하기도 한다.

declare const a2: string | number;
// never를 이용해서 잘못된 타입을 넣지 않는 방법
if (typeof a2 !== 'string'){
  a2; // numver
  if (typeof a2 !== 'number'){
    a2; // never
  }
}

type Indexable<T> = T extends string ? T & {[index: string]: any} : never;

type ObjectIndexable = Indexable<'aa'>;

type ObjectIndexable2 = Indexable<{}>;