Typescript provides code auto completion and helpful hints with a text editor like Microsoft\textquotesingle{}s Visual Studio Code or another text editor with Typescript support.

Note that this example uses Type\+Script 2.\+0.\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22625}{}\doxysection{Examples}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22625}
There are two examples in this directory\+:


\begin{DoxyItemize}
\item Simple Protractor example
\begin{DoxyItemize}
\item Similar to the \href{https://github.com/angular/protractor/tree/master/example}{\texttt{ github protractor example}}
\item Files {\ttfamily conf.\+ts} and {\ttfamily spec.\+ts}
\end{DoxyItemize}
\item \mbox{\hyperlink{classPage}{Page}} objects example
\begin{DoxyItemize}
\item Follows the \href{http://www.protractortest.org/\#/page-objects}{\texttt{ protractortest.\+org page objects example}}
\item Files {\ttfamily conf\+Page\+Objects.\+ts}, {\ttfamily spec\+Page\+Objects.\+ts}, and {\ttfamily angular\+Page.\+ts}
\end{DoxyItemize}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22626}{}\doxysection{File organization}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22626}

\begin{DoxyCode}{0}
\DoxyCodeLine{exampleTypescript/}
\DoxyCodeLine{|-\/ node\_modules/       // downloaded node modules}
\DoxyCodeLine{|-\/ tmp/                // compiled javascript output}
\DoxyCodeLine{|}
\DoxyCodeLine{|-\/ .gitignore          // since typescript produces javascript, we should not}
\DoxyCodeLine{|                      // commit javascript to the repo}
\DoxyCodeLine{|-\/ angularPage.ts      // page object example}
\DoxyCodeLine{|-\/ confPageObjects.ts  // configuration for the page objects example}
\DoxyCodeLine{|-\/ package.json        // node dependencies for the project}
\DoxyCodeLine{|-\/ README.md           // this file}
\DoxyCodeLine{|-\/ spec.ts             // spec for the simple protractor example}
\DoxyCodeLine{|-\/ specPageObjects.ts  // spec for the page objects example}
\DoxyCodeLine{|-\/ tsconfig.json       // typescript transpile configuration }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22627}{}\doxysection{Getting started}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22627}
This package.\+json references the local protractor directory with {\ttfamily \char`\"{}protractor\char`\"{}\+: \char`\"{}file\+: ../\char`\"{}}. For the type declarations to work, from the protractor directory run an {\ttfamily npm install} to generate the declarations file.

Next, install the example\+Typescript node\+\_\+modules with\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{npm install }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22628}{}\doxysection{Protractor typings}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22628}
To use Protractor types, you\textquotesingle{}ll need to import {\ttfamily protractor}. After this is imported, you should have autocompletion hints when typing.


\begin{DoxyCode}{0}
\DoxyCodeLine{import \{browser, element, by, By, \$, \$\$, ExpectedConditions\} from 'protractor'; }

\end{DoxyCode}


Although the Protractor configuration file can be written in javascript, creating it in typescript will have some hints. These hints and the reference configuration can be found in {\ttfamily lib/config.\+ts}. Below we are importing the Config interface and applying that interface to the config variable\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{import \{Config\} from 'protractor';}
\DoxyCodeLine{}
\DoxyCodeLine{export let config: Config = \{}
\DoxyCodeLine{  ...}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22629}{}\doxysection{Ambient typings}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22629}
Protractor also uses ambient types including jasmine, jasminewd2, and node. These are brought in via the {\ttfamily tsconfig.\+json} file, which uses npm module resolution to get types from {\ttfamily node\+\_\+modules/@types}.

If you are using the jasmine framework for your tests, make sure to do\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{npm install -\/-\/save-\/dev @types/jasmine @types/jasminewd2 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22630}{}\doxysection{Compiling your code}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22630}
To convert your typescript to javascript (transpiling), you\textquotesingle{}ll use the Typescript compiler (tsc). If you install typescript globally, the command is {\ttfamily tsc}. If it is not installed globally, the typescript compiler can be executed with {\ttfamily npm run tsc}.\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22631}{}\doxysection{Running Protractor}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22631}
After transpiling your code to javascript, you\textquotesingle{}ll run Protractor like before\+: {\ttfamily protractor conf.\+js}\hypertarget{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22632}{}\doxysection{Helpful links}\label{md_sfcode_node_modules_protractor_exampleTypescript_README_autotoc_md22632}

\begin{DoxyItemize}
\item \href{http://www.typescriptlang.org/docs/tutorial.html}{\texttt{ Typescript\+Lang.\+org tutorial}}
\item \href{http://www.typescriptlang.org/docs/handbook/tsconfig-json.html}{\texttt{ Typescript\+Lang.\+org tsconfig.\+json}}
\item \href{https://gitter.im/Microsoft/TypeScript}{\texttt{ Typescript gitter}}
\item \href{http://stackoverflow.com/questions/tagged/typescript}{\texttt{ Typescript stackoverflow}} 
\end{DoxyItemize}