// JS
function Plus(a,b){
return a + b;
}
// TS
function Plus(a : number, b : number){ // 타입 지정(컴파일 타임 시 오류 체크)
return a + b;
}
타입스크립트 컴파일 명령어
let age = 30; // number로 타입 추론
기본 데이터 타입
객체 타입
특수 타입
let x : string = "string";
function plue(a :number,b: number) : number { // <- 리턴 타입
return a + b;
}
function plue(a :number,b: number) : void { // <- 리턴 값이 없을 경우
console.log( a + b );
}
let stdId : number = 1;
let stdName : string = "Mike";
function getInfo(id : number) :{
}{
}
let stdId : number = 1;
let stdName : string = 'Mike';
let age : number = 17;
let gender : string = 'Male';
interface Student{
stdId : number;
stdName : string;
age : number;
gender : string;
// setName(name : string) : void;
setName : (name : string) => void; // 화살표 함수
}
class MyStudent implements Student{
stdId = 123456;
stdName = 'dev';
age = 17;
gender = 'Male';
setName(name : string) : void{
this.stdName = name;
console.log("이름 설정: " + this.stdName)
}
}
const myInstance = new MyStudent();
myInstance.setName('데브');
// 이름 설정 : 데브
function getInfo(id:number) : Student{
return { // return 값과 인터페이스 요소값이 같지 않으면 error
stdId : id,
stdName : 'dev',
age : 17,
gender : 'Male'
};
}
console.log(getInfo(5678));
// {
// stdId : 5678,
// stdName 'dev',
// age : 17,
// gender : 'Male'
// }
interface Student{
stdId : number;
stdName? : string;
}
function getInfo(id? : number) : Student{
return {
stdId : id,
stdName : 'dev'
};
}
enum GenderType{ // 성별 범위 제한
Male,
Female
}
interface Student{
gender : GenderType
}
class MyStudent implements Student{
gender = GenderType.Male;
}
enum GenderType{ // 성별 범위 제한
Male,
Female
}
interface Student{
gender : 'male' | 'female';
}
class MyStudent implements Student{
gender = GenderType.Male;
}
const user : {name : string, age : number} = {
name : 'a',
age : 20
// age : '25' (number가 아니므로 error 발생)
}
let anyVal : any = 100;
anyVal = 'kim';
let anyVal : number | string;
type srtOrNum = number | string;
let num str : strOrNum = '100';
function convertToString(val : strOrNum) :string{
if(typeof val === 'string'){
item = 0;
}
}
let numbers : number[] = [1,2,3,4,5];
let fruits : string[] = ['apple', 'banana','orange'];
let mixedArray : (number | string)[] = [1,'two',3];
let readOnlyArr : ReadonlyArray<number> = [1,2,3]; // 수정 안됨, read only
let greeting : [number, string, boolean] = [1, 'hello', true];
// 타입의 순서가 정해져 있음
class Employee{
// 멤버 변수 ->
empName : string;
age : number;
empJob : string;
// 멤버 함수 ->
printEmp = () : void => {
console.log(this.empName +'의 나이는' + this.age +'이고, 직업은' + this.job +'입니다.');
// this 자기 자신의 객체
}
}
let emp1 = new Employee(); // 객체 생성
class Employee{
empName : string;
age : number;
empJob : string;
// 생성자
constructor(mpName : string, age : number, empJob : string;){
this.empName = empName;
this.age = age;
this.empJob = empJob;
}
printEmp = () : void => {
console.log(this.empName +'의 나이는' + this.age +'이고, 직업은' + this.job +'입니다.');
}
}
let emp1 = new Employee('kim', 10, 'student'); // 객체 생성
// emp1 객체가 생성될 때 초기값을 넘겨주고 동시에 생성자 호츨
class Employee{
constructor(
private _mpName : string,
private _age : number,
private _empJob : string;
){
}
// get set
get empName(){
return this._empName;
}
set empName(val : string){
this._empName = val;
}
printEmp = () : void => {
console.log(this._empName +'의 나이는' + this._age +'이고, 직업은' + this._job +'입니다.');
}
}
let emp1 = new Employee('kim', 10, 'student'); // 객체 생성
emp1.empName = 'lee'; // getter와 setter를 통해 변경
import {Component} from "react";
class ClassCom extends Component{
render(){
return(
<div>
클래스형 컴포넌트
</div>
)
}
}
export defalut ClassCom;
function FunCom(){
return(
<div>
함수형 컴포넌트
</div>
)
}
export defalut FunCom;
const FunCom = () => {
return(
<div>
함수형 컴포넌트
</div>
)
}
export defalut FunCom;
import React, { useState } from 'react';
const TodoList : React.FC = () => {
const title : string = "오늘 할 일";
const [todos] = useState(['공부하기','자기','회의하기']);
return(
<div className='container'>
<h1>{title}</h1>
<ul>
<li>{todos[0]}</li>
<li>{todos[1]}</li>
<li>{todos[2]}</li>
</ul>
</div>
)
}
export default TodoList;
const colors = ['red', 'blue', 'pupple'];
cosnt [f, s, t] = colors;
const person = {
name : 'kim",
age : 18,
city : 'seoul'
}
const {name, age, city} = person;