├── .node-version ├── .vscode └── settings.json ├── src ├── type-safety.ts ├── install-typescript.ts ├── union.ts ├── tuple.ts ├── nullable-types.ts ├── type-assertions.ts ├── null-and-undefined.ts ├── void.ts ├── function.ts ├── boolean.ts ├── more-constructor.ts ├── default-parameters.ts ├── return-type.ts ├── arrow-functions.ts ├── object.ts ├── partial-and-required.ts ├── number-string.ts ├── anonymous-function.ts ├── interfaces.ts ├── unknown.ts ├── abstract-classes.ts ├── as-const.ts ├── mapped-types.ts ├── literal.ts ├── infer-keyword.ts ├── never.ts ├── pick-and-omit.ts ├── rest-parameters.ts ├── any.ts ├── index-signatures.ts ├── my-first-class.ts ├── array.ts ├── type-aliases.ts ├── overloads.ts ├── parameters.ts ├── exclude-extract-nonnullable-definition.ts ├── optional-arguments.ts ├── return-of-interfaces.ts ├── record.ts ├── utility-types-readonly.ts ├── static-members.ts ├── intersection.ts ├── constructor-parameters.ts ├── exclude-extract-nonnullable.ts ├── inheritance.ts ├── generics.ts ├── namespaces.ts ├── enum.ts ├── access-modifiers.ts ├── type-compatibility.ts └── getter-and-setter.ts ├── README.md ├── package.json ├── .gitignore └── tsconfig.json /.node-version: -------------------------------------------------------------------------------- 1 | 18.12.1 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /src/type-safety.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let isFinished: boolean = true; 4 | // isFinished = 1; 5 | -------------------------------------------------------------------------------- /src/install-typescript.ts: -------------------------------------------------------------------------------- 1 | let message: string = 'Hello, ts-node-dev!'; 2 | console.log({ message }); 3 | -------------------------------------------------------------------------------- /src/union.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let value: number | string = 1; 4 | value = 'foo'; 5 | value = 100; 6 | -------------------------------------------------------------------------------- /src/tuple.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let profile: [string, number] = ['Ham', 43]; 4 | // profile = [43, 'Ham']; 5 | -------------------------------------------------------------------------------- /src/nullable-types.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let profile: { name: string; age: number | null } = { 4 | name: 'Ham', 5 | age: null 6 | }; 7 | -------------------------------------------------------------------------------- /src/type-assertions.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let name: any = 'Ham'; 4 | 5 | let length = (name).length; 6 | 7 | // length = 'foo'; 8 | -------------------------------------------------------------------------------- /src/null-and-undefined.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let absence: null = null; 4 | // absence = 'hello'; 5 | 6 | let data: undefined = undefined; 7 | // data = 123; 8 | -------------------------------------------------------------------------------- /src/void.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | function returnNothing(): void { 4 | console.log("I dont't return anything!"); 5 | } 6 | 7 | console.log(returnNothing()); 8 | -------------------------------------------------------------------------------- /src/function.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | function bmi(height: number, weight: number): number { 4 | return weight / (height * height); 5 | } 6 | 7 | console.log(bmi(1.78, 86)); 8 | -------------------------------------------------------------------------------- /src/boolean.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let name = 'TypeScript'; 4 | 5 | let isFinished: boolean = true; 6 | isFinished = false; 7 | // isFinished = 1; 8 | console.log({ isFinished }); 9 | -------------------------------------------------------------------------------- /src/more-constructor.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | class Person { 4 | constructor(public name: string, protected age: number) {} 5 | } 6 | 7 | const me = new Person('はむさん', 43); 8 | console.log(me); 9 | -------------------------------------------------------------------------------- /src/default-parameters.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | const nextYearSalary = (currentSalary: number, rate: number = 1.1) => { 4 | return currentSalary * rate; 5 | }; 6 | 7 | console.log(nextYearSalary(1000)); 8 | -------------------------------------------------------------------------------- /src/return-type.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | function add(a: number, b: number) { 4 | return a + b; 5 | } 6 | 7 | console.log(add(1, 2)); 8 | 9 | type ReturnTypeFromAdd = ReturnType; 10 | -------------------------------------------------------------------------------- /src/arrow-functions.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let bmi: (height: number, weight: number) => number = ( 4 | height: number, 5 | weight: number 6 | ): number => weight / (height * height); 7 | 8 | console.log(bmi(1.78, 86)); 9 | -------------------------------------------------------------------------------- /src/object.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let profile1: object = { name: 'Ham' }; 4 | profile1 = { birthYear: 1976 }; 5 | 6 | let profile2: { 7 | name: string; 8 | } = { name: 'Ham' }; 9 | profile2 = { name: 'Nimo' }; 10 | -------------------------------------------------------------------------------- /src/partial-and-required.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type Profile = { 4 | name: string; 5 | age?: number; 6 | zipCode: number; 7 | }; 8 | 9 | type PartialType = Partial; 10 | type RequiredType = Required; 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # typescript-for-javascript-developers 2 | 3 | ## コンパイルを実行するコマンド例 4 | 5 | $ npm run dev src/default-parameters.ts 6 | 7 |
8 | 9 | [はむさんのオンラインスクール](https://diveintohacking.com/) 10 | 11 |
12 | -------------------------------------------------------------------------------- /src/number-string.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let year: number = 1976; 4 | // year = false; 5 | console.log(year); 6 | 7 | let age: number = 0x2b; 8 | 9 | console.log(age); 10 | 11 | let name: string = 'Ham'; 12 | // name = 10; 13 | console.log(name); 14 | -------------------------------------------------------------------------------- /src/anonymous-function.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let bmi: (height: number, weight: number) => number = function( 4 | height: number, 5 | weight: number 6 | ): number { 7 | return weight / (height * height); 8 | }; 9 | 10 | console.log(bmi(1.78, 86)); 11 | -------------------------------------------------------------------------------- /src/interfaces.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type ObjectType = { 4 | name: string; 5 | age: number; 6 | }; 7 | 8 | interface ObjectInterface { 9 | name: string; 10 | age: number; 11 | } 12 | 13 | let object: ObjectInterface = { 14 | name: 'Ham-san', 15 | age: 43 16 | }; 17 | -------------------------------------------------------------------------------- /src/unknown.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | const kansu = (): number => 43; 4 | 5 | let numberAny: any = kansu(); 6 | let numberUnknown: unknown = kansu(); 7 | 8 | let sumAny = numberAny + 10; 9 | if (typeof numberUnknown === 'number') { 10 | let sumUnknown = numberUnknown + 10; 11 | } 12 | -------------------------------------------------------------------------------- /src/abstract-classes.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | abstract class Animal { 4 | abstract cry(): string; 5 | } 6 | 7 | class Lion extends Animal { 8 | cry() { 9 | return 'roar'; 10 | } 11 | } 12 | 13 | class Tiger extends Animal { 14 | cry() { 15 | return 'grrrr'; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/as-const.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let name = 'Atsushi'; 4 | 5 | name = 'Ham'; 6 | 7 | let nickname = 'Ham' as const; 8 | nickname = 'Ham'; 9 | 10 | let profile = { 11 | name: 'Atsushi', 12 | height: 178 13 | } as const; 14 | 15 | // profile.name = 'Ham'; 16 | // profile.height = 180; 17 | -------------------------------------------------------------------------------- /src/mapped-types.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type Profile = { 4 | name: string; 5 | age: number; 6 | }; 7 | 8 | type PartialProfile = Partial; 9 | type PropertyTypes = keyof Profile; 10 | 11 | type Optional = { [P in keyof T]?: T[P] | null }; 12 | type OptoinalProfile = Optional; 13 | -------------------------------------------------------------------------------- /src/literal.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let dayOfTheWeek: '日' | '月' | '火' | '水' | '木' | '金' | '土' = '日'; 4 | dayOfTheWeek = '月'; 5 | // dayOfTheWeek = '31'; 6 | 7 | let month: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 = 1; 8 | month = 12; 9 | // month = 13; 10 | 11 | let TRUE: true = true; 12 | // TRUE = false; 13 | -------------------------------------------------------------------------------- /src/infer-keyword.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | function add(a: number, b: number) { 4 | return a + b; 5 | } 6 | 7 | console.log(add(1, 2)); 8 | 9 | type ReturnTypeFromAdd = ReturnType; 10 | 11 | type MyReturnType any> = T extends ( 12 | ...args: any 13 | ) => infer R 14 | ? R 15 | : any; 16 | -------------------------------------------------------------------------------- /src/never.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | function error(message: string): never { 4 | throw new Error(message); 5 | } 6 | 7 | try { 8 | let result = error('test'); 9 | console.log({ result }); 10 | } catch (error) { 11 | console.log({ error }); 12 | } 13 | 14 | let foo: void = undefined; 15 | let bar: never = error('only me!'); 16 | -------------------------------------------------------------------------------- /src/pick-and-omit.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type DetailedProfile = { 4 | name: string; 5 | height: number; 6 | weight: number; 7 | }; 8 | 9 | type SimpleProfile = Pick; 10 | type SmallProfile = Omit; 11 | 12 | type MyOmit = Pick; 13 | type MySmallProfile = MyOmit; 14 | -------------------------------------------------------------------------------- /src/rest-parameters.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | const reducer = (accumulator: number, currentValue: number) => { 4 | console.log({ accumulator, currentValue }); 5 | return accumulator + currentValue; 6 | }; 7 | 8 | const sum: (...values: number[]) => number = (...values: number[]): number => { 9 | return values.reduce(reducer); 10 | }; 11 | 12 | console.log(sum(1, 2, 3, 4, 5)); 13 | -------------------------------------------------------------------------------- /src/any.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export {}; 4 | 5 | let url: string = 6 | 'https://udemy-utils.herokuapp.com/api/v1/articles?token=token123'; 7 | 8 | axios.get(url).then(function(response) { 9 | interface Article { 10 | id: number; 11 | title: string; 12 | description: string; 13 | } 14 | let data: Article[]; 15 | data = response.data; 16 | console.log(data); 17 | }); 18 | -------------------------------------------------------------------------------- /src/index-signatures.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | interface Profile { 4 | name: string; 5 | underTwenty: boolean; 6 | [index: string]: string | number | boolean; 7 | } 8 | 9 | let profile: Profile = { name: 'Ham', underTwenty: false }; 10 | 11 | // How to write index signatures 12 | // { [ index: typeForIndex ]: typeForValue } 13 | 14 | profile.name = 'Ham'; 15 | profile.age = 43; 16 | profile.nationality = 'Japan'; 17 | -------------------------------------------------------------------------------- /src/my-first-class.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | class Person { 4 | name: string; 5 | age: number; 6 | 7 | constructor(name: string, age: number) { 8 | this.name = name; 9 | this.age = age; 10 | } 11 | 12 | profile(): string { 13 | return `name: ${this.name}, age: ${this.age}`; 14 | } 15 | } 16 | let taro = new Person('Taro', 30); 17 | console.log(taro.profile()); 18 | // let hanako = new Person(); 19 | -------------------------------------------------------------------------------- /src/array.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let numbers: number[] = [1, 2, 3]; 4 | 5 | let numbers2: Array = [1, 2, 3]; 6 | let strings2: Array = ['Tokyo', 'Osaka', 'Kyoto']; 7 | 8 | let strings: string[] = ['TypeScript', 'JavaScript', 'CoffeeScript']; 9 | 10 | let nijigenHairetsu: number[][] = [ 11 | [50, 100], 12 | [150, 300] 13 | ]; 14 | 15 | let hairetsu: (string | number | boolean)[] = [1, false, 'Japan']; 16 | -------------------------------------------------------------------------------- /src/type-aliases.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type Mojiretsu = string; 4 | 5 | const fooString: string = 'Hello'; 6 | const fooMojiretsu: Mojiretsu = 'Hello'; 7 | 8 | const example1 = { 9 | name: 'Ham', 10 | age: 43 11 | }; 12 | 13 | type Profile = { 14 | name: string; 15 | age: number; 16 | }; 17 | 18 | const example2: Profile = { 19 | name: 'Ham', 20 | age: 43 21 | }; 22 | 23 | type Profile2 = typeof example1; 24 | -------------------------------------------------------------------------------- /src/overloads.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | function double(value: number): number; 4 | function double(value: string): string; 5 | 6 | function double(value: any): any { 7 | console.log(typeof value); 8 | if (typeof value === 'number') { 9 | return value * 2; 10 | } else { 11 | return value + value; 12 | } 13 | } 14 | 15 | console.log(double(100)); 16 | console.log(double('Go ')); 17 | // console.log(double(true)); 18 | -------------------------------------------------------------------------------- /src/parameters.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | const debugProfile = (name: string, age: number) => { 4 | console.log({ name, age }); 5 | }; 6 | 7 | debugProfile('Ham', 43); 8 | 9 | type Profile = Parameters; 10 | 11 | const profile: Profile = ['Gloria', 76]; 12 | 13 | debugProfile(...profile); 14 | 15 | type MyParameters any> = T extends ( 16 | ...args: infer P 17 | ) => any 18 | ? P 19 | : never; 20 | -------------------------------------------------------------------------------- /src/exclude-extract-nonnullable-definition.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type MyExclude = DebugType; 4 | type DebugType = () => void; 5 | type SomeTypes = string | number | DebugType; 6 | type FunctionType = Exclude; 7 | type MyFunctionType = MyExclude; 8 | 9 | type FunctionTypeByExtract = Extract; 10 | 11 | type NullableTypes = string | number | null | undefined; 12 | type NonNullableTypes = NonNullable; 13 | -------------------------------------------------------------------------------- /src/optional-arguments.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let bmi: (height: number, weight: number, printable?: boolean) => number = ( 4 | height: number, 5 | weight: number, 6 | printable?: boolean 7 | ): number => { 8 | const bmi: number = weight / (height * height); 9 | if (printable) { 10 | console.log({ bmi }); 11 | } 12 | return bmi; 13 | }; 14 | 15 | bmi(1.78, 86); 16 | 17 | // bmi(身長, 体重, console.logで出力するかどうか?) 18 | // bmi(1.78, 86, true); 19 | // bmi(1.78, 86, false); 20 | // bmi(1.78, 86); 21 | -------------------------------------------------------------------------------- /src/return-of-interfaces.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | class Mahotsukai {} 4 | class Souryo {} 5 | 6 | class Taro extends Mahotsukai {} 7 | 8 | interface Kenja { 9 | ionazun(): void; 10 | } 11 | 12 | interface Senshi { 13 | kougeki(): void; 14 | } 15 | 16 | class Jiro implements Kenja, Senshi { 17 | ionazun(): void { 18 | console.log('iozazun'); 19 | } 20 | 21 | kougeki(): void { 22 | console.log('kougeki'); 23 | } 24 | } 25 | 26 | const jiro = new Jiro(); 27 | jiro.ionazun(); 28 | jiro.kougeki(); 29 | -------------------------------------------------------------------------------- /src/record.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | // Record 4 | 5 | type Prefectures = 'Tokyo' | 'Chiba' | 'Tottori' | 'Shiga'; 6 | 7 | type Covid19InfectionInfo = { 8 | kanji_name: string; 9 | confirmed_cases: number; 10 | }; 11 | 12 | const covid19Japan: Record = { 13 | Tokyo: { kanji_name: '東京', confirmed_cases: 1960 }, 14 | Chiba: { kanji_name: '千葉', confirmed_cases: 249 }, 15 | Tottori: { kanji_name: '鳥取', confirmed_cases: 2 }, 16 | Shiga: { kanji_name: '滋賀', confirmed_cases: 13 }, 17 | }; 18 | -------------------------------------------------------------------------------- /src/utility-types-readonly.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type Profile = { 4 | name: string; 5 | age: number; 6 | }; 7 | 8 | const me: Profile = { 9 | name: 'Ham', 10 | age: 43, 11 | }; 12 | 13 | me.age++; 14 | 15 | console.log(me); 16 | 17 | type PersonalDataType = Readonly; 18 | 19 | const friend: PersonalDataType = { 20 | name: 'Shigeru', 21 | age: 40, 22 | }; 23 | 24 | // friend.age++; 25 | 26 | type YomitoriSenyo = { readonly [P in keyof T]: T[P] }; 27 | type YomitoriSenyoProfile = YomitoriSenyo; 28 | -------------------------------------------------------------------------------- /src/static-members.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | class Me { 4 | static isProgrammer: boolean = true; 5 | static firstName: string = 'Atsushi'; 6 | static lastName: string = 'Ishida'; 7 | 8 | static work() { 9 | // "Hey, guys! This is Atsushi! Are you interested in TypeScript? Let's dive into TypeScript!"; 10 | return `Hey, guys! This is ${this.firstName}! Are you interested in TypeScript? Let's dive into TypeScript!`; 11 | } 12 | } 13 | 14 | // let me = new Me(); 15 | // console.log(me.isProgrammer); 16 | console.log(Me.isProgrammer); 17 | console.log(Me.work()); 18 | -------------------------------------------------------------------------------- /src/intersection.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type Pitcher1 = { 4 | throwingSpeed: number; 5 | }; 6 | 7 | type Batter1 = { 8 | battingAverage: number; 9 | }; 10 | 11 | const DaimajinSasaki: Pitcher1 = { 12 | throwingSpeed: 154 13 | }; 14 | 15 | const OchiaiHiromitsu: Batter1 = { 16 | battingAverage: 0.367 17 | }; 18 | 19 | // type TwoWayPlayer = { 20 | // throwingSpeed: number; 21 | // battingAverage: number; 22 | // }; 23 | 24 | type TwoWayPlayer = Pitcher1 & Batter1; 25 | 26 | const OtaniShouhei: TwoWayPlayer = { 27 | throwingSpeed: 165, 28 | battingAverage: 0.286 29 | }; 30 | -------------------------------------------------------------------------------- /src/constructor-parameters.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | class Person { 4 | name: string; 5 | age: number; 6 | 7 | constructor(name: string, age: number) { 8 | this.name = name; 9 | this.age = age; 10 | } 11 | } 12 | 13 | let taro = new Person('Taro', 30); 14 | console.log(taro); 15 | 16 | type PersonType = typeof Person; 17 | 18 | type Profile = ConstructorParameters; 19 | 20 | const profile: Profile = ['Ham', 43]; 21 | const ham = new Person(...profile); 22 | console.log(ham); 23 | 24 | type MyConstructorParameters< 25 | T extends new (...args: any) => any 26 | > = T extends new (...args: infer P) => any ? P : never; 27 | -------------------------------------------------------------------------------- /src/exclude-extract-nonnullable.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type DebugType = () => void; 4 | type SomeTypes = string | number | DebugType; 5 | type FunctionType = Exclude; 6 | type NonFunctionType = Exclude; 7 | type TypeExcludingFunction = Exclude; 8 | 9 | type FunctionTypeByExtract = Extract; 10 | type NonFunctionTypeByExtract = Extract; 11 | type FunctionTypeExtractingFunction = Extract; 12 | 13 | type NullableTypes = string | number | null | undefined; 14 | type NonNullableTypes = NonNullable; 15 | -------------------------------------------------------------------------------- /src/inheritance.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | class Animal { 4 | constructor(public name: string) {} 5 | 6 | run(): string { 7 | return 'I can run'; 8 | } 9 | } 10 | 11 | class Lion extends Animal { 12 | public speed: number; 13 | 14 | constructor(name: string, speed: number) { 15 | super(name); 16 | 17 | this.speed = speed; 18 | } 19 | 20 | run(): string { 21 | return `${super.run()} ${this.speed}km/h.`; 22 | } 23 | } 24 | 25 | // let animal = new Animal(); 26 | // console.log(animal.run()); 27 | // let lion = new Lion(); 28 | // console.log(lion.run()); 29 | console.log(new Animal('Mickey').run()); 30 | console.log(new Lion('Simba', 80).run()); 31 | -------------------------------------------------------------------------------- /src/generics.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | // const echo = (arg: number): number => { 4 | // return arg; 5 | // }; 6 | // 7 | // const echo = (arg: string): string => { 8 | // return arg; 9 | // }; 10 | 11 | const echo = (arg: T): T => { 12 | return arg; 13 | }; 14 | 15 | console.log(echo(100)); 16 | console.log(echo('Hello!')); 17 | console.log(echo(true)); 18 | 19 | class Mirror { 20 | constructor(public value: T) {} 21 | 22 | echo(): T { 23 | return this.value; 24 | } 25 | } 26 | 27 | console.log(new Mirror(123).echo()); 28 | console.log(new Mirror('Hello, generics!').echo()); 29 | console.log(new Mirror(true).echo()); 30 | -------------------------------------------------------------------------------- /src/namespaces.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | namespace Japanese { 4 | export namespace Tokyo { 5 | export class Person { 6 | constructor(public name: string) {} 7 | } 8 | } 9 | export namespace Osaka { 10 | export class Person { 11 | constructor(public name: string) {} 12 | } 13 | } 14 | } 15 | 16 | namespace English { 17 | export class Person { 18 | constructor( 19 | public firstName: string, 20 | public middleName: string, 21 | public lastName: string 22 | ) {} 23 | } 24 | } 25 | 26 | const me = new Japanese.Tokyo.Person('はむさん'); 27 | console.log(me.name); 28 | 29 | const meOsaka = new Japanese.Osaka.Person('はむやん'); 30 | console.log(meOsaka.name); 31 | 32 | const michael = new English.Person('Michael', 'Joseph', 'Jackson'); 33 | console.log(michael); 34 | -------------------------------------------------------------------------------- /src/enum.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | enum Months { 4 | January = 1, 5 | February, 6 | March, 7 | April, 8 | May, 9 | Jun, 10 | July, 11 | August, 12 | September, 13 | October, 14 | November, 15 | December 16 | } 17 | 18 | console.log(Months.January); 19 | console.log(Months.February); 20 | console.log(Months.December); 21 | 22 | // const MonthsJs = { 23 | // January: 0, 24 | // February: 1 25 | // }; 26 | // 27 | // console.log(MonthsJs.January); 28 | // console.log(MonthsJs.February); 29 | 30 | enum COLORS { 31 | RED = '#FF0000', 32 | WHITE = '#FFFFFF', 33 | GREEN = '#008000', 34 | BLUE = '#0000FF', 35 | // YELLOW = '#FFFF00', 36 | BLACK = '#000000' 37 | } 38 | 39 | let green = COLORS.GREEN; 40 | console.log({ green }); 41 | 42 | enum COLORS { 43 | YELLOW = '#FFFF00', 44 | GRAY = '#808080' 45 | } 46 | 47 | COLORS.YELLOW; 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-for-javascript-developers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "ts-node-dev --respawn", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/DiveIntoHacking/typescript-for-javascript-developers.git" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/DiveIntoHacking/typescript-for-javascript-developers/issues" 19 | }, 20 | "homepage": "https://github.com/DiveIntoHacking/typescript-for-javascript-developers#readme", 21 | "devDependencies": { 22 | "ts-node": "^10.9.1", 23 | "ts-node-dev": "^2.0.0", 24 | "typescript": "^4.9.3" 25 | }, 26 | "dependencies": { 27 | "axios": "^1.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/access-modifiers.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | class Person { 4 | public name: string; 5 | // private age: number; 6 | protected age: number; 7 | protected nationality: string; 8 | 9 | constructor(name: string, age: number, nationality: string) { 10 | this.name = name; 11 | this.age = age; 12 | this.nationality = nationality; 13 | } 14 | 15 | profile(): string { 16 | return `name: ${this.name}, age: ${this.age}`; 17 | } 18 | } 19 | 20 | class Android extends Person { 21 | constructor(name: string, age: number, nationality: string) { 22 | super(name, age, nationality); 23 | } 24 | 25 | profile(): string { 26 | return `name: ${this.name}, age: ${this.age}, nationality: ${this.nationality}`; 27 | } 28 | } 29 | 30 | let taro = new Person('Taro', 30, 'Japan'); 31 | console.log(taro.profile()); 32 | console.log(taro.name); 33 | // console.log(taro.age); 34 | // let hanako = new Person(); 35 | -------------------------------------------------------------------------------- /src/type-compatibility.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | let fooCompatible: any; 4 | let barCompatible: string = 'TypeScript'; 5 | 6 | console.log(typeof fooCompatible); 7 | 8 | fooCompatible = barCompatible; 9 | 10 | console.log(typeof fooCompatible); 11 | 12 | let fooIncompatible: string; 13 | let barIncompatible: number = 1; 14 | 15 | // fooIncompatible = barIncompatible; 16 | 17 | let fooString: string; 18 | let barString: string = 'string'; 19 | 20 | fooString = barString; 21 | 22 | let fooStringLiteral: 'fooStringLiteral' = 'fooStringLiteral'; 23 | fooString = fooStringLiteral; 24 | 25 | let fooNumber: number; 26 | let fooNumberLiteral: 1976 = 1976; 27 | fooNumber = fooNumberLiteral; 28 | 29 | interface Animal { 30 | age: number; 31 | name: string; 32 | } 33 | 34 | class Person { 35 | constructor(public age: number, public name: string) {} 36 | } 37 | 38 | let me: Animal; 39 | me = new Person(43, 'HamSan'); 40 | console.log({ me }); 41 | -------------------------------------------------------------------------------- /src/getter-and-setter.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | // * owner 4 | // * 所有者 5 | // * 初期化時に設定できる。 6 | // * 途中で変更できない。 7 | // * 参照できる。 8 | // * secretNumber 9 | // * 個人番号 10 | // * 初期化時に設定できる。 11 | // * 途中で変更できる。 12 | // * 参照できない。 13 | 14 | class MyNumberCard { 15 | private _owner: string; 16 | private _secretNumber: number; 17 | 18 | constructor(owner: string, secretNumber: number) { 19 | this._owner = owner; 20 | this._secretNumber = secretNumber; 21 | } 22 | 23 | get owner() { 24 | return this._owner; 25 | } 26 | 27 | set secretNumber(secretNumber: number) { 28 | this._secretNumber = secretNumber; 29 | } 30 | 31 | debugPrint() { 32 | return `secretNumber: ${this._secretNumber}`; 33 | } 34 | } 35 | 36 | let card = new MyNumberCard('はむさん', 1234567890); 37 | console.log(card.debugPrint()); 38 | card.secretNumber = 1111111111; 39 | console.log(card.debugPrint()); 40 | // card.owner = 'Ham'; 41 | console.log(card.owner); 42 | // card.secretNumber; 43 | // card._secretNumber; 44 | console.log(card.secretNumber); 45 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | // "lib": [], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | // "outDir": "./", /* Redirect output structure to the directory. */ 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | 63 | /* Advanced Options */ 64 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 65 | } 66 | } 67 | --------------------------------------------------------------------------------