<step87>'react_typescript'

1)

typescript => javascript

app.ts => tsc app.ts => app.js

npm install -g typescript
npm init

tsc hello.ts --target es6

tsconfig.json

{
    // 포함되어질 파일을 지정
    "include": ["src/**/*.ts"],
    // 노드패키지는 컴파일 대상에서 제외
    "exclude": [
        "node_modules"
    ],
    // 타입스크립트 컴파일러에 대한 옵션지정
    "compilerOptions": {
        // 모듈에 대한 옵션
        "module":"es6",
        // 모듈의 루트가 되는 폴더
        "rootDir":"src",
        // 컴파일된 파일들의 최상위 폴더
        "outDir":"dist",
        // 자바스크립트 구문 지정
        "target":"es6",
        // 원본타입스크립트를 나타낼지 지정
        "sourceMap": false,
        // 컴파일시 주석 제거하기 지정
        "removeComments": true,
        // 타입을 지정하도록 지정
        "noImplicitAny": true
    }
}

 

src/ex01.ts

// 변수에 초기값을 할당하면 초기값의 데이터 타입이 지정됨
// 다른 데이터 타입을 넣을 수 없음
// 변수 선언시 초기값을 할당하지 않고 선언만 한 경우 any타입이 되어
// 다양한 타입을 할당할 수 있음
// 변수 선언시 타입도 지정 ex) let score: number = 20
function outer() {
    if (true) {
        let score;
        let score2: number;
        score = 30;
    }
}
outer();

tsc

생성된다

 

src/ex02_basicType.ts

let numValue: number;
let stringValue: string;
let booleanValue: boolean;
let undefinedValue: undefined;
let nullValue: null;
let objValue: object;
let symbolValue: symbol;

numValue = 30;
stringValue = "hello";

booleanValue = true;

// 원시형 값을 제외한 객체
objValue = [1,2,3,4,5];

// 배열 정의
let nameList: string[];
nameList = ["a","b","c","d"]

// 객체 정의 - 프로퍼티에 대한 타입을 지정
// 인라인 타입지정
let user1: { name: string, age: number }
user1 = {
    name: "green",
    age: 30
}

// 인터페이스
// 인터페이스 메소드 정의
interface TV {
    turnOn() : boolean;
    turnOff() : void;
}
const myTV : TV = {
    turnOn() {
        return true;
    },
    turnOff() {
        
    }
}
// tv 매개변수명 TV : 타입
function tryTurnOn(tv: TV){
    console.log(tv.turnOn());
}
tryTurnOn(myTV);

// 일반변수, 매개변수, 개체 속성 등에 : TYPE 이런 형태로 타입을 지정할 수 있다

function add(a:number, b:number){
    return a + b;
}
add(10,20)

// 배열 array 구문 : string [], Array<String>
let arr1: string [] = ['a','b','c']
let arr2: Array<string> = ['a','b','c']

// 유니언 타입(다중타입) - 문자열과 숫자를 동시에 가지는 배열
let arr1_uni: (string | number) [] = ['a','b','c',1,2,3];
let arr2_uni: Array<string | number> = ['a','b','c',1,2,3];

// 데이터 타입을 지정할 수 없을때 any타입을 지정
let someArr: any [] = [0,1,"A",true]

src/ex03_interface.ts

interface IUser {
    name: string,
    age: number,
    isValid : boolean
}

let useArr: IUser [] = [
    {
        name: 'Neo',
        age: 35,
        isValid: true
    },
    {
        name: 'Lewis',
        age: 35,
        isValid: true
    },
    {
        name: 'Evan',
        age: 35,
        isValid: true
    },
]

// 객체를 반복적으로 만들어줄 때는 interface사용
interface IDog {
    name: string,
    color: string,
    age: number
}
let dog1: IDog = {
    name: "구름",
    color: "흰색",
    age: 3
}
let dog2: IDog = {
    name: "크림",
    color: "노란색",
    age: 2
}

// 인라인 타입지정
// let user10: { name: string, age: number }
// user1 = {
//     name: "green",
//     age: 30
// }

// 읽기전용 배열 생성하기
let arrA : readonly number [] = [1,2,3,4]
let arrB : ReadonlyArray<number> = [0,9,8,7]

src/ex04_function.ts

// 함수의 리턴 타입 지정 function myFun(): 타입지정

// function myFunction(num: number): number {
//     let result: number = num + 10;
//     return result
// }
// console.log(myFunction(10))

function myFunction(num: number): void {
    let result: number = num + 10;
    console.log(result)
}

// optional ?키워드를 사용하면 선택적 매개 변수를 지정할 수 있음
function myAdd(x: number, y?: number): number {
    return x + (y || 0)
}
const sum = myAdd(2);
console.log(sum);

const sum2 = myAdd(2,5);
console.log(sum2);

interface IUser2 {
    name: string,
    age: number,
    isAdult?: boolean
}
let user10: IUser2 = {
    name: "aa",
    age: 10,
    isAdult: false
}
let user20: IUser2 = {
    name: "bb",
    age: 20
}

// 화살표 함수 타입 지정하기
// let arFunction = () => {

// }
// 인수와 반환 값이 없을 때
let arFunction : () => void;
arFunction = function(){
    console.log('abc');
}
// 인수와 반환 값이 있을 때
let arFunction2 : (arg1: number, arg2: number) => number;
arFunction2 = function(x, y){
    return x + y;
}

interface IUser3 {
    readonly name: string,
    age: number
}
let user21: IUser3 = {
    name: "Neo",
    age: 30
}
user21.age = 20;
// Error user21.name = "aaaa"; // readonly 읽기 전용이기 때문에 수정불가
console.log(user21.name);

interface IUser4 {
    name: string,
    age: number
}
let user22: Readonly<IUser4> = {
    name: 'green',
    age: 12
}
// Error user22.age = 20;

 

실행예시

cd dist (경로지정)