TypeScript Tutorial 1. basic types

1. [TS] 1. Basic Types
by JBee

2. TypeScript에서는JavaScript에서사용했었던 number , string ,
boolean 과 같은데이터타입을기반으로 정적 타이핑 을지원합니다.

3. Basic Types
변수에타입을지정해주기 위해서TypeScript에서는 : 을통해지원합니다.
기존의JavaScript에서변수를선언하면서 : 으로해당변수의타입을지정
해줍니다.

4. Boolean
let isExist: boolean = false;
boolean 타입을지정합니다.

5. Number, 숫자
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
number 타입을지정합니다.

6. String, 문자열
let name: string = "jbee";
let greeting: string = `Hi, I'm ${name}!`;
string 타입을지정합니다.

7. Array, 배열
let arr: number[] = [1, 2, 3];
or
let arr: Array<number> = [1, 2, 3];
기존에배열리터럴을사용하여배열을정의하면서정의하는배열에어떠한데
이터타입의원소가 들어갈 것인지를Type을통해제공할수있습니다. (전자
의형태가 design guide)

8. Tuple, 튜플
key-value 의형태를저장할때는, 위와같이타입을지정해줄수있습니다.
TS transpiler가 잘못된타입의값이들어왔다는것을error message로알려
줍니다.
let tuple: [string, number];
tuple = ["age", 25];
tuple = ["name", "jbee];// Error
> message: 'Type '[string, string]' is not assignable to type '
Type 'string' is not assignable to type 'number'.' at: '5,1'

9. Enum
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
마찬가지로Java의 enum 과 같은구조를갖습니다. 시작하는멤버에0부터
번호를매기고, 만약1부터시작해야한다면임의적으로시작하는숫자를지정
할수있습니다. 또는각각에게 번호를지정할수도있습니다.
enum Subject {Math = 1, Science = 3, History = 7}
console.log(Subject[3]);//Science
지정한번호로호출도가능합니다.

10. tsc 명령어를통해서저희가 작성한TypeScript 코드를변환된Javascript
코드로볼수있습니다. TypeScript의 Enum 은다음과 같이변환되는것을
확인하실수있습니다.
var Subject;
(function (Subject) {
Subject[Subject["Math"] = 1] = "Math";
Subject[Subject["Science"] = 3] = "Science";
Subject[Subject["History"] = 7] = "History";
})(Subject || (Subject = {}));
자바스크립트의다섯줄이타입스크립트한줄로작성되었습니다:)

11. Any
코드를작성하면서사용되는변수에알맞은데이터타입을설정하는것은중요
하지만데이터타입이동적으로결정되는변수도존재하게 됩니다. 이럴때사
용할수있는타입이 any 입니다.
let notSureVar: any;
notSureVar = 3;
notSureVar = `hi`;
notSureVar = [1,2,3];
any 로타입을지정하면Compile Time에서 Type checking 을하지않
습니다.

12. let notSureVar; // == let notSureVar: any;
any 로타입을지정하는것과 위의자바스크립트는동치라고 볼수있습니다.

13. let arr: any[] = [1, `jbee`, true];
여러가지타입의요소가 포함되는배열을정의할때도 any 를사용할수있
습니다.
any 의역할이자바스크립트에서의 Object 와같은역할을하는느낌이드
는데요, 실제로2.2version에서 Object 타입이추가되었습니다. 일단코드
를통해확인해보겠습니다.

14. let user = {
getName() {
console.log(`hi`);
},
name : "jbee"
}
let notSureObj: Object;
notSureObj = user;
notSureObj.getName(); // error
notSureObj.name; // error
//Property 'getName' does not exist on type 'Ojbect'
let notSureVar: any;
notSureVar = user;
notSureVar.getName(); // success
notSureVar.name; // "jbee"

15. 변수의type을 Object 로지정하고, 실제Object를정의하여변수에할당했
습니다. 그리고 할당한Ojbect에존재하는메소드를호출했더니에러가 발생
합니다. getName() 이라는프로퍼티가 없다고 하네요.
분명 getName() 메소드가 존재하는Ojbect를할당했는데말이죠. name
프로퍼티도마찬가지입니다. 하지만 any 타입으로지정했을때는메소드를
호출할수있고, 프로퍼티를찾을수있습니다. 이 Object 타입은할당만가
능할뿐, 메소드나프로퍼티에접근할수없습니다.
About Object Type

16. Void
값을반환하지않는함수의return type을지정할때사용할수있습니다.
function greeting(): void {
console.log(`hi`);
}
물론변수의타입에도사용할수있습니다.
let foo: void;
foo = undefined;
foo = null;
foo = `foo`; //error
> Type 'string' is not assignable to type 'void'
하지만 void 로선언된변수에는 undefined 와 null 값만할당할수있
습니다.

17. Null, Undefined
기본적으로 null 과 undefined 는모든타입들의서브타입이라고 할수있
습니다. 즉다른타입으로지정된변수에도 null 과 undefined 를할당할
수있습니다.
--strictNullChecks flag를사용하게 되면 null 과
undefined 는 void 타입의변수에만할당할수있습니다.
TypeScript에서는해당flag사용을권장하고 있습니다.

18. Never
never 타입은발생하지않는경우에대한타입을대표하는타입입니다. 코드
를통해살펴보겠습니다.
위의예제와같이 throw 를하거나error를발생시키는function의return
type으로설정합니다. About Never Type
// Function returning never must have unreachable end point
function error(message: string): never {
throw new Error(message);
}
// Inferred return type is never
function fail() {
return error("Something failed");
}
// Function returning never must have unreachable end point
function infiniteLoop(): never {
while (true) {
}
}

19. Type Assertions
타입어설션이란개발자가 타입스크립트에게 "내가 무슨짓을하고 있는지아
니까, 나를믿어줘!"하고 메세지를보내는것입니다. 주로엔티티의타입을보
다구체적으로설정할때사용합니다.

20. let greet: any = `Hello!`;
let lengthOfGreet: number;
lengthOfGreet = greet.length;
lengthOfGreet = (<string> greet).length;
lengthOfGreet = (greet as string).length;
any 타입에대해서 형변환(type casting) 하는것처럼보이지만실제로
는특별한검사나데이터재구성을하지않습니다. 이타입어설션은컴파일타
임에만영향을미칠뿐런타임시에는아무런영향을주지않습니다. 보다데이
터타입을구체화시킬때사용합니다.
<> 를사용하는방법과 as 를사용하는두가지방법이존재합니다. 선호도
에따라어떻게 사용할지결정할수있지만 JSX 와함께사용하는경우에는
as 를사용하는방법만허용됩니다.

21. 감사합니다:)
1. Basic Type end
Reference
TypeScript Official Document ‑ Basic Types